<template>
    <div class="container">
        <div class="deal-info">
            <mt-field readonly label="楼盘名称：" v-model="report.premisesName" ></mt-field>
            <mt-field readonly label="报备人：" v-model="report.name"></mt-field>
            <mt-field readonly label="联系电话：" v-model="report.mobile"></mt-field>
            <mt-field readonly label="当前状态：" v-model="currentStatus"></mt-field>
        </div>
        <div class="deal-common">
            <div class="mint-cell mint-field">
                <div class="mint-cell-wrapper">
                    <div class="mint-cell-title">
                        <span class="mint-cell-text">交易状态：</span>
                    </div>
                    <div class="mint-cell-value">
                        <input type="text" name="jjr" placeholder="请选择交易状态"  @click="popupStatus=true" v-model="statusName" readonly>
                    </div>
                </div>
            </div>

            <mt-field label="备注信息："  :attr="{ maxlength: 500 }" v-model="remarkContent"></mt-field>

        </div>
        <div class="deal-sign" v-if="dealStatus == 3 ||dealStatus == 2">
            <div v-if="dealStatus == 3 ||dealStatus == 2">
                <mt-field label="楼栋：" placeholder="请输入楼栋信息" :attr="{ maxlength: 400 }" v-model="report.buildingName"></mt-field>
                <mt-field label="房间号：" placeholder="请输入房间号" :attr="{ maxlength: 400 }" v-model="report.roomName"></mt-field>
            </div>
            <div v-if="dealStatus == 3">
                <mt-field label="计价面积：" placeholder="请输入计价面积" :attr="{ maxlength: 400 }" v-model="report.valuationArea"></mt-field>
                <mt-field label="成交总额：" placeholder="请输入成交总额" :attr="{ maxlength: 400 }" v-model="report.dealAmount"></mt-field>
            </div>

        </div>

        <div class="report-image" style="margin-top: 10px;padding: 10px 0;">
            <div class="mint-cell mint-field">
            <div class="mint-cell-wrapper">
                <div class="mint-cell-title">
                    <span class="mint-cell-text">上传图片：</span>
                </div>
                <div class="mint-cell-value">
                    <uploadFile v-bind:uploadState="fileFlag" v-on:fileList='handleImage' ></uploadFile>
                </div>
            </div>
        </div>
        </div>

        <button class="button" style="position: fixed;bottom: 0;width: 100%;" @click="changeConfirm">确定</button>

        <mt-popup v-model="popupStatus" position="bottom" class="mint-popup mint-datetime mint-popup-bottom">
            <div class="" >
                <div class="picker-toolbar">
                    <div class="mint-datetime-action" style="width:50%;float:left" @click="popupStatus=false">取消</div>
                    <div class="mint-datetime-action" style="width:50%;float:left" @click="confirmStatus">确定</div>
                </div>
                <mt-picker  :slots="statusSlots"  value-key='name' content="fullName"  :item-height="48" @change="selectStatus" ></mt-picker>
            </div>
        </mt-popup>
    </div>
</template>

<script>
    import { Popup,Toast} from 'mint-ui';
    import uploadFile from '../base/uploadFile.vue'
    export default {
        name: "report-deal",
        components:{Popup,Toast,uploadFile},
        created() {
            let dealRes = {
                menu_0008_0002_0002_0001: false,//认筹
                menu_0008_0002_0002_0002: false,//认筹失败
                menu_0008_0002_0002_0003: false,//认购
                menu_0008_0002_0002_0004: false,//退定
                menu_0008_0002_0002_0005: false,//签约
                menu_0008_0002_0002_0006: false //退房
            }
            var res = JSON.parse(window.sessionStorage.getItem("2_resources"));
            for (let index = 0; index < res.length; index++) {
                const item = res[index];
                if (dealRes.hasOwnProperty(item)) {
                    dealRes[item] = true;
                }
            }
            if(dealRes.menu_0008_0002_0002_0001) this.statusVisit.push({id:1,name:'认筹'})
            if(dealRes.menu_0008_0002_0002_0003) this.statusVisit.push({id:2,name:'认购'})
            if(dealRes.menu_0008_0002_0002_0005) this.statusVisit.push({id:3,name:'签约'})

            if(dealRes.menu_0008_0002_0002_0002) this.statusIdentify.push({id:4,name:'认筹失败'})
            if(dealRes.menu_0008_0002_0002_0003) this.statusIdentify.push({id:2,name:'认购'})
            if(dealRes.menu_0008_0002_0002_0005) this.statusIdentify.push({id:3,name:'签约'})

            if(dealRes.menu_0008_0002_0002_0004) this.statusSubscribe.push({id:4,name:'退定'})
            if(dealRes.menu_0008_0002_0002_0005) this.statusSubscribe.push({id:3,name:'签约'})

            if(dealRes.menu_0008_0002_0002_0006) this.statusSign.push({id:4,name:'退房'})
        },
        mounted(){
            this.reportId = this.$route.params.id;
            this.getReportDetail();
        },
        data(){
            return{
                reportId:'',
                report:{
                    buildingName:'',
                    roomName:'',
                    valuationArea:'',
                    dealAmount:''
                },
                statusSlots:[],
                popupStatus:false,
                dealStatus:'',
                statusName:'',
                currentStatus:'',
                statusVisit:[],
                statusIdentify:[],
                statusSubscribe:[],
                statusSign:[],
                signShow:false,
                fileList:[],
                fileFlag:true,
                remarkContent:''
            }
        },
        methods:{
            getReportDetail(){
                var _self = this;
                var params = {
                    id:this.reportId
                };
                var body = {};
                body.params = params;
                var url = _self.utilHelper.apiUrl + "/api/getCPDetail";
                _self.$http.post(url, body).then((response) => {
                    var data = response.body.resData;
                    _self.report = data.cpDto;
                    if(_self.report.confirmStatus != 0){
                        _self.currentStatus = _self.report.confirmStatusName;
                    }else{
                        _self.currentStatus = _self.report.customerStatusName;
                    }
                    //加载状态数据
                    if(_self.report.confirmStatus == 3){
                        this.statusSlots.push({values:this.statusSign});
                    }else if(_self.report.confirmStatus == 2){
                        this.statusSlots.push({values:this.statusSubscribe});
                    }else if(_self.report.confirmStatus == 1){
                        this.statusSlots.push({values:this.statusIdentify});
                    }else{
                        this.statusSlots.push({values:this.statusVisit});
                    }
                });
            },
            changeConfirm(){
                var _self = this;
                var body = {};
                body.params = {
                    id:_self.reportId,
                    confirmStatus:_self.dealStatus,
                    remark:_self.remarkContent
                }
                if (!_self.dealStatus || _self.dealStatus == 0) {
                    Toast("请选择交易状态!");
                    return;
                }
                if(_self.dealStatus == 3) {
                    if (!_self.report.buildingName) {
                        Toast("请填写楼栋!");
                        return;
                    }
                    if (!_self.report.roomName) {
                        Toast("请填写房间号!");
                        return;
                    }
                    if (!_self.report.valuationArea) {
                        Toast("请填写计价面积!");
                        return;
                    }
                    if (!_self.report.dealAmount) {
                        Toast("请填写交易金额!");
                        return;
                    }
                    body.params.buildingName = _self.report.buildingName;
                    body.params.roomName = _self.report.roomName;
                    body.params.valuationArea = _self.report.valuationArea;
                    body.params.dealAmount = _self.report.dealAmount;
                }
                if(_self.dealStatus == 2) {
                    if (!_self.report.buildingName) {
                        Toast("请填写楼栋!");
                        return;
                    }
                    if (!_self.report.roomName) {
                        Toast("请填写房间号!");
                        return;
                    }
                    body.params.buildingName = _self.report.buildingName;
                    body.params.roomName = _self.report.roomName;
                }
                var url = _self.utilHelper.apiUrl+'/api/changeCPConfirm';
                body.params.affixList=this.imgesList;

                _self.$http.post(url,body).then((response) =>{
                    const res = response.body.resData;
                    if(res.result == '1') {
                        // Toast("变更成功");

                        _self.fileFlag=false;
                        _self.imgesList=[];
                        _self.params={
                            id:'',
                            confirmStatus:'',
                            remark: ''
                        },
                        _self.reprot={
                            buildingName:'',
                            roomName:'',
                            valuationArea:'',
                            dealAmount:''
                        }
                        //跳转页面
                        _self.$router.push({name:'DealResult',params:{result:true}});
                    }else {
                        Toast(res.resultMsg);
                        return;
                        // _self.$router.push({name:'DealResult',params:{result:false}});
                    }
                },(response)=>{
                    _self.$router.push({name:'DealResult',params:{result:false}});
                });

            },
            confirmStatus(){
              if(!this.dealStatus){
               this.dealStatus = this.statusSlots[0].values[0].id;
               this.statusName = this.statusSlots[0].values[0].name;
              }
              this.popupStatus=false
            },
            selectStatus(index,values){
                if(values){
                    this.dealStatus = values[0].id;
                    this.statusName = values[0].name;
                }
            },
            handleImage(data) {
                if(data == '1'){
                    this.fileFlag=true;
                }else{
                    this.imgesList=data
                }
            },

        }
    }
</script>

<style scoped>
    .deal-common{margin-top: 10px;}
</style>